<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Title from "./Title.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Base/Typography/Title",
        component: Title,
        tags: ["autodocs"],
        argTypes: {
            prefix: {
                control: { type: "select" },
                options: ["bar", "dot"],
            },
            heading: {
                control: { type: "select" },
                options: ["1", "2", "3", "4", "5", "6"],
            },
            prefixColor: {
                control: { type: "color" },
            },
        },
        args: {},
    });
</script>

{#snippet tempIcon(name: string)}
    <Icon icon={name} />
{/snippet}

<Story name="Default" args={{ heading: 1 }}>
    {#snippet template(args)}
        <Title {...args}>Typography Title</Title>
    {/snippet}
</Story>
<Story name="渐变" args={{ gradient: ["-45deg", "#ff0000", "#2080f0"] }}>
    {#snippet template(args)}
        <Title heading={1} {...args}>Gradient Typography Title Gradient Typography Title</Title>
    {/snippet}
</Story>
<Story name="Inline" args={{ inline: true, gradient: ["-45deg", "#ff0000", "#2080f0"] }}>
    {#snippet template(args)}
        <Title heading={1} {...args}>Gradient Typography Title</Title>Other Content
    {/snippet}
</Story>

<Story name="Prefix" args={{ prefix: "bar", inline: true, heading: 3 }}>
    {#snippet template(args)}
        <Title {...args}>Typography Title</Title>
    {/snippet}
</Story>

<Story name="prefixWidth" args={{ prefixWidth: 2, inline: true, prefix: "bar", heading: 3 }}>
    {#snippet template(args)}
        <Title {...args}>Typography Title</Title>
    {/snippet}
</Story>

<Story name="prefixColor" args={{ prefixColor: "#ff0000", inline: true, prefix: "bar", heading: 3 }}>
    {#snippet template(args)}
        <Title {...args}>Typography Title</Title>
    {/snippet}
</Story>

<Story name="prefixGradientColor" args={{ prefixColor: ["-45deg", "#ff0000", "#2080f0"], gradient: ["-45deg", "#ff0000", "#2080f0"], inline: true, prefix: "bar", heading: 3 }}>
    {#snippet template(args)}
        <Title {...args}>中文Typography Title With Bar</Title>
    {/snippet}
</Story>

<Story name="prefixGap" args={{ prefixGap: 24, prefix: "bar", inline: true, heading: 3 }}>
    {#snippet template(args)}
        <Title {...args}>Typography Title</Title>
    {/snippet}
</Story>

<Story name="Ellipsis" args={{ ellipsis: { showTooltip: { align: "top", content: "Tooltip Content" } }, heading: 3 }}>
    {#snippet template(args)}
        <div style="padding-top: 100px; width: 300px;">
            <Title {...args}>Long Text with ellipsis Long Text with ellipsis Long Text with ellipsis Long Text with ellipsis</Title>
        </div>
    {/snippet}
</Story>
